<template>
	<view class="custom-new-year">

		<view class="custom-item">
			<view class="title">
				<text>祝福类型</text>
			</view>

			<view class="type-radio-group">
				<uni-data-checkbox selectedColor="#c80802" selectedTextColor="#c80802" v-model="isCompleted"
					:localdata="completed"></uni-data-checkbox>
			</view>
		</view>


		<!-- 海报图例 -->
		<view class="poster-list" v-if="isCompleted == 0">
			<view class="poster-outbox" v-for="(item, index) in posterList" :key="index">
				<view class="poster-box" :class="{'active': posterIndex == index}" @click.stop="clickPosterImg(index)">
					<image class="poster-img" :src="item.posterImg" mode="aspectFill">
					</image>
					<text class="poster-name">{{item.name}}</text>
				</view>
				<view class="preview-text" v-if="posterIndex == index" @click.top="previewImage(item.posterImg)">
					<van-icon class="preview-icon" name="eye-o" />
					<text class="text">查看大图</text>
				</view>
			</view>
		</view>

		<!-- 视频图例 -->
		<view class="video-list" v-else-if="isCompleted == 1">
			<view class="poster-outbox" v-for="(item, index) in medias" :key="index">
				<view class="poster-box" :class="{'active': mediaIndex == index}" @click.stop="clickMediaImg(index)">
					<image class="poster-img" :src="item.cover" mode="aspectFill">
					</image>
					<text class="poster-name">{{item.name}}</text>
				</view>
				<view class="preview-text" v-if="mediaIndex == index" @click.top="previewVideo(item)">
					<van-icon class="preview-icon" name="eye-o" />
					<text class="text">播放效果</text>
				</view>
			</view>
		</view>

		<button class="submit-btn" @click="handleCustomPoster">定制专属祝福</button>


		<!-- 步骤提示 -->
		<view class="step-tip-box" v-if="isLearnStep">
			<view class="blur-bg"></view>
			<view class="step-tip-text-box">
				<image class="tip-icon" src="https://biapi.vaubang.cn/UploadFiles/Images/newYear/step-icon.png"
					mode="widthFix"></image>
				<view class="step-text">
					<p>如何定制新年祝福</p>
					<p>跟着图示一起制作吧！</p>
				</view>
			</view>
			<image class="tip-image" src="http://cloud.vaubang.cn/new-year-cover/share-example.gif" mode="widthFix">
			</image>
			<button class="step-btn" @click.stop.prevent="handleLearn">我已学会，立即开始制作</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tokenInfo: {},
				posterIndex: -1,
				mediaIndex: -1,
				isCompleted: 0,
				completed: [{
					text: '海报',
					value: 0
				}, {
					text: '视频',
					value: 1
				}],
				posterList: [{
					"posterImg": "https://biapi.vaubang.cn/UploadFiles/Images/newYear/new-year-theme-1.png",
					"name": "主题一"
				}, {
					"posterImg": "https://biapi.vaubang.cn/UploadFiles/Images/newYear/new-year-theme-2.png",
					"name": "主题二"
				}, {
					"posterImg": "https://biapi.vaubang.cn/UploadFiles/Images/newYear/new-year-theme-3.png",
					"name": "主题三"
				}],
				imgs: [],
				medias: [{
						"name": "主题一",
						"cover": "http://cloud.vaubang.cn/new-year-cover/video-1.png",
						"videoUrl": "http://cloud.vaubang.cn/new-year-video-1.MP4"
					}, {
						"name": "主题二",
						"cover": "http://cloud.vaubang.cn/new-year-cover/video-2.png",
						"videoUrl": "http://cloud.vaubang.cn/new-year-video-2.MP4"
					},
					{
						"name": "主题三",
						"cover": "http://cloud.vaubang.cn/new-year-cover/video-3.png",
						"videoUrl": "http://cloud.vaubang.cn/new-year-video-3.mp4"
					},

				],
				isLearnStep: false,
			}
		},
		onLoad() {
			let tokenInfo = uni.getStorageSync("tokenInfo");
			let isLearnStep = uni.getStorageSync("isLearnStep");
			if (isLearnStep && isLearnStep == 'learned') {
				this.isLearnStep = false;
			} else {
				this.isLearnStep = true;
			}
			this.tokenInfo = tokenInfo;
			if (tokenInfo.shopName == '长沙沃邦') {
				this.medias.unshift({
					"name": "沃邦专用",
					"cover": "http://cloud.vaubang.cn/new-year-cover/vaubang-cover.png",
					"videoUrl": "http://cloud.vaubang.cn/vaubang-media.mp4"
				})
			}
			this.handleIsRegistered();
		},
		methods: {
			handleLearn() {
				this.isLearnStep = false;
				uni.setStorageSync("isLearnStep", "learned");
			},
			clickPosterImg(index) {
				this.posterIndex = index;
			},
			clickMediaImg(index) {
				this.mediaIndex = index;
			},
			// 播放视频
			previewVideo(item) {
				wx.previewMedia({
					sources: [{
						url: item.videoUrl,
						type: "video",
						// poster: item.cover
					}]
				})
			},
			// 预览海报
			previewImage(url) {
				console.log('点击了预览');
				var dataArray = [url];
				uni.previewImage({
					urls: dataArray,
					current: url
				});
			},
			// 定制海报入口
			handleCustomPoster() {
				let isCompleted = this.isCompleted;
				if (isCompleted == 0) {
					if (this.posterIndex != -1) {
						uni.navigateTo({
							url: "/packageC/new-year/custom-poster?themeId=" + this.posterList[this.posterIndex]
								.name
						})
					} else {
						getApp().showToast("请选择定制主题");
					}
				} else {
					if (this.mediaIndex != -1) {
						uni.navigateTo({
							url: "/packageC/new-year/custom-media?cover=" + this.medias[this.mediaIndex].cover +
								"&mediaUrl=" + this.medias[this.mediaIndex].videoUrl
						})
					} else {
						getApp().showToast("请选择定制主题");
					}
				}
			},
			// 验证是否注册
			handleIsRegistered() {
				getApp().showLoading();
				var that = this;
				uni.login({
					provider: "weixin",
					success(loginRes) {
						console.log('loginRes', loginRes);
						let code = loginRes.code;
						uni.request({
							url: "https://biapi.vaubang.cn/api/v1/WxOpen/Pay/Login?code=" +
								code,
							method: "post",
							header: {
								"content-type": "application/json;charset=utf-8;"
							},
							success(res) {
								uni.hideLoading();
								console.log('新年祝福登陆信息', res);
								// 当登录者已经绑定了openid时，直接保存登录信息返回的token以及公司信息
								// if (res.data.code == 200) {
								// 	uni.setStorageSync("isLogin", true);
								// 	uni.setStorageSync('userOpenid', res.data.data.openid);
								// 	getApp().globalData.userOpenid = res.data.data.openid;
								// 	that.userOpenid = res.data.data.openid;
								// }
							},
							fail(err) {
								console.log(err);
							}
						})
					}
				})
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.custom-new-year {
		.step-tip-box {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;

			.blur-bg {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: #000;
				opacity: 0.7;
				z-index: 2;
			}

			.step-btn {
				position: absolute;
				top: 640px;
				left: 70px;
				right: 70px;
				border: none;
				background-color: #c80802;
				color: #fff;
				font-weight: 500;
				font-size: 15px;
				height: 30pt;
				line-height: 30pt;
				box-shadow: inset 0px 4px 7px 0px rgba(255, 255, 255, 0.33);
				border-radius: 40px;
				text-align: center;
				z-index: 3;
				animation: bigSmallToggle 2s linear infinite;

				&::after {
					border: none;
				}

				&:active {
					background-color: #AF0500;
				}
			}

			.step-tip-text-box {
				position: absolute;
				top: 10px;
				left: 0;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 3;

				.tip-icon {
					width: 70px;
					height: 83px;
				}

				.step-text {
					font-size: 16px;
					color: #fff;
					font-weight: bold;
					margin-left: 10px;
					animation: bigSmallToggle 4s linear infinite;

					p {
						margin-top: 3px;

						&:first-child {
							margin-top: 0;
						}
					}
				}
			}

			.tip-image {
				width: 230px;
				height: 498px;
				position: absolute;
				left: 50%;
				margin-left: -115px;
				top: 110px;
				z-index: 3;
				border-radius: 20px;
				border: 2px solid #fff;
			}
		}

		.submit-btn {
			margin: 20px 15px;
			border: none;
			background-color: #c80802;
			color: #fff;
			font-size: 15px;
			height: 35pt;
			line-height: 35pt;

			&:active {
				background-color: #AF0500;
			}
		}

		.custom-item {
			margin: 20px;

			.title {
				display: flex;
				align-items: center;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.8);

				.example {
					font-size: 12px;
					margin-left: 10px;
					color: #c80802;
					font-weight: 500;
				}
			}

			.placeholder-style {
				color: #ddd;
			}

			.custom-input {
				height: 38px;
				line-height: 38px;
				padding: 0 10px;
				box-sizing: border-box;
				font-size: 14px;
				color: #666;
				background-color: #fff;
				border-radius: 4px;
				margin-top: 10px;
				border: 1px solid rgba(0, 0, 0, 0.05);
			}

			.type-radio-group {
				margin-top: 10px;
			}
		}

		.poster-list {
			display: flex;
			align-items: center;
			margin: 10px;

			.poster-outbox {
				flex: 1;
				min-width: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-right: 5px;
				border-radius: 4px;

				&:last-child {
					margin-right: 0;
				}

				.poster-box {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 200px;
					padding: 5px;
					box-sizing: border-box;
					border: 1px solid transparent;
					border-radius: 4px;

					.poster-img {
						width: 100%;
						height: 100%;
						border-radius: 4px;
					}

					.poster-name {
						font-size: 12px;
						color: rgba(0, 0, 0, 0.8);
						margin-top: 5px;
					}

					&.active {
						border: 1px solid #c80802;

						.poster-name {
							color: #c80802;
						}
					}
				}

				.preview-text {
					display: flex;
					align-items: center;
					font-size: 12px;
					color: rgba(0, 0, 0, 0.4);
					margin-top: 5px;

					.preview-icon {
						font-size: 18px;
						margin-right: 2px;
					}
				}
			}



		}

		.video-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin: 10px;

			.poster-outbox {
				width: calc(50% - 2.5px);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-right: 5px;
				border-radius: 4px;
				margin-bottom: 10px;

				&:nth-child(2n+2) {
					margin-right: 0;
				}

				.poster-box {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 200px;
					padding: 5px;
					box-sizing: border-box;
					border: 1px solid transparent;
					border-radius: 4px;

					.poster-img {
						width: 100%;
						height: 100%;
						border-radius: 4px;
					}

					.poster-name {
						font-size: 12px;
						color: rgba(0, 0, 0, 0.8);
						margin-top: 5px;
					}

					&.active {
						border: 1px solid #c80802;

						.poster-name {
							color: #c80802;
						}
					}
				}

				.preview-text {
					display: flex;
					align-items: center;
					font-size: 12px;
					color: rgba(0, 0, 0, 0.4);
					margin-top: 5px;

					.preview-icon {
						font-size: 18px;
						margin-right: 2px;
					}
				}
			}
		}
	}

	@keyframes bigSmallToggle {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}
</style>
